<template>
  <nav>
    <span class="tuijian">推荐</span>
    <span class="dongtai">各地动态</span>
    <span class="xiaoketang">小课堂</span>
    <span class="shipin">视频</span>
  </nav>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
nav {
  height: 3rem;
  width: 100%;
  background-color: burlywood;
  display: flex;
  justify-content: space-between;
  line-height: 0.3rem;
}
.tuijian {
  font-size: 0.2rem;
  color: #f3f4f6;
  width: 32%;
  height: 3rem;
  align-self: center;
  line-height: 3rem;
}
.dongtai {
  font-size: 0.18rem;
  color: blue;
  width: 32%;
  height: 3rem;
  align-self: center;
  line-height: 3rem;
}
.xiaoketang {
  font-size: 0.18rem;
  color: #f3f4f6;
  width: 32%;
  height: 3rem;
  align-self: center;
  line-height: 3rem;
}
.shipin {
  font-size: 0.18rem;
  color: #f3f4f6;
  width: 32%;
  height: 3rem;
  align-self: center;
  line-height: 3rem;
}
</style>
